import React, {
    PureComponent
} from 'react';

import {
    View,
    TextInput,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Button,
    Layout,
    Loading,
} from './../../../components';

import Connect from './../../../utils/connect';

interface Props {
    user: any,
    userActions: any
}

interface State {
    about:any
}

import {
    Actions
} from 'react-native-router-flux';

import * as userTypes from './../../../state/types/user';

import userAction from './../../../state/actions/user';

@Connect([`user`],{
    userActions: userAction
})
class About extends PureComponent<Props,State> {

    static defaultProps = {
        user: {},
        userActions: {}
    }

    state = {
        about:undefined
    }

    get userState() {
        const {
            user
        } = this.props;
        return user;
    }

    get loginUser() {
        const {
            loginUser
        } = this.userState;
        return loginUser;
    }

    get Data() {
        return this.loginUser;
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions || {}
    }

    get about() {
        const {
            aboutme
        } = this.Data;
        return aboutme
    }

    get aboutVal() {
        const {
            about
        } = this.state;
        return about !== undefined ? about:this.about;
    }

    get disabled() {
        const {
            about = ``
        } = this.state;
        return !about.trim()
    }

    private onChangeText = (text:any) => {
        this.setState({
            about:text
        })
    }

    private onSuccess = () => {
        Actions.pop()
        Tip.success({
            message:`Save successfully.`
        })
    }

    private onSubmit = async () => {
        const {
            about
        } = this.state;

        Loading.show();

        try {
            await this.userActions[
                userTypes.setUserProfile
            ]({ about:about });
            this.onSuccess();
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close()
    }

    render() {
        return (
            <Layout title="More about myself & my match">
                <View style={styles.form}>
                    <TextInput
                        multiline={true}
                        value={this.aboutVal}
                        style={styles.inputStyle}
                        onChangeText={this.onChangeText}
                    />
                </View>
                <View style={styles.buttonStyle}>
                    <Button
                        title="Save"
                        onPress={this.onSubmit}
                        disabled={this.disabled}
                    />
                </View>
            </Layout>
        )
    }
}

export default About;

const styles = StyleSheet.create({
     form:{
         height:168,
         paddingHorizontal:16,
         borderRadius:8,
         backgroundColor:`#323541`
     },
    inputStyle:{
         flex:1,
        fontSize:14,
        color:`#fff`,
        textAlignVertical: `top`
    },
    buttonStyle:{
         paddingVertical:24
    }
}) as any;